<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for和v-if一起使用</title>
  <script type="text/javascript" src="vue.js"></script>
  <style>
    button {
      margin-bottom: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <p v-for="item in filteredList" v-bind:key="item.id">
    <!-- <p v-for="item in list" v-bind:key="item.id" v-if="item.id < 2"> -->
      {{item.name}}
    </p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: '',
        newId: 5,
        list: [
          { id: 3, name: 'JavaScript' },
          { id: 1, name: 'HTML' },
          { id: 4, name: 'jQuery' },
          { id: 2, name: 'CSS' }
        ]
      },
      computed: {
        filteredList() {
          return this.list.filter(function(item) {
            //将返回id < 2的项，添加到filteredList数组
            return item.id < 2
          })
        }
      }
    })
  </script>
</body>
</html>
